<template>
    <!-- 报警规律 -->
    <div>
        <div class="page-item-title">报警规律</div>
        <el-row class="twocategory">
            <el-col :span="12"
                ><div class="one-chart" id="LeftHoseEchart"></div
            ></el-col>
            <el-col :span="12"
                ><div class="one-chart" id="Rightweakechart"></div
            ></el-col>
        </el-row>
        <el-row class="botcontent">
            <el-col :span="12">报警时间段规律</el-col>
            <el-col :span="12">报警星期段规律</el-col>
        </el-row>
    </div>
</template>
<script>
import { getAITimeSlot } from "@/api/record";
let Echarts = require("echarts/lib/echarts");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/angleAxis");
require("echarts/lib/component/radiusAxis");
require("echarts/lib/component/polar");
export default {
    name: "AlarmLaw",
    data() {
        return {
            leftshow: false,
            rightshow: false,
            domStyle: {
                width: "455px",
                height: "379px"
            },
            echarts_LeftDate: {},
            echarts_RightDate: {},
            BQ_left: {
                0: 0,
                1: 0,
                2: 0,
                3: 0,
                4: 0,
                5: 0,
                6: 0,
                7: 0,
                8: 0,
                9: 0,
                10: 0,
                11: 0,
                12: 0,
                13: 0,
                14: 0,
                15: 0,
                16: 0,
                17: 0,
                18: 0,
                19: 0,
                20: 0,
                21: 0,
                22: 0,
                23: 0
            },
            BQ_right: {
                星期日: 0,
                星期一: 0,
                星期二: 0,
                星期三: 0,
                星期四: 0,
                星期五: 0,
                星期六: 0
            }
        };
    },
    created() {},
    methods: {
        isEmptyObject(obj) {
            for (var key in obj) {
                return true;
            }
            return false;
        },
        // 获取小时分布countType: 1     获取报警星期分布countType: 2
        getData(parames) {
            let that = this;
            that.echarts_LeftDate = {};
            that.echarts_RightDate = {};
            getAITimeSlot({
                orgIds: parames.orgIds,
                startTime: parames.startTime,
                endTime: parames.endTime,
                alarmType: parames.alarmType,
                countType: 1
            }).then(res => {
                if (res.status === 200) {
                    that.echarts_LeftDate = res.data;
                    that.getLeftEchartsData(that.echarts_LeftDate);
                }
            });
            getAITimeSlot({
                orgIds: parames.orgIds,
                startTime: parames.startTime,
                endTime: parames.endTime,
                alarmType: parames.alarmType,
                countType: 2
            }).then(res => {
                if (res.status === 200) {
                    that.echarts_RightDate = res.data;
                    that.getRightEchartsData(that.echarts_RightDate);
                }
            });
        },
        //echart--init
        getLeftEchartsData(leftData) {
            let that = this;
            this.BQ_left = {
                0: 0,
                1: 0,
                2: 0,
                3: 0,
                4: 0,
                5: 0,
                6: 0,
                7: 0,
                8: 0,
                9: 0,
                10: 0,
                11: 0,
                12: 0,
                13: 0,
                14: 0,
                15: 0,
                16: 0,
                17: 0,
                18: 0,
                19: 0,
                20: 0,
                21: 0,
                22: 0,
                23: 0
            };
            if (leftData) {
                for (var key in leftData) {
                    let attr=Number(key).toString()
                    if(that.BQ_left.hasOwnProperty(attr)){
                        that.BQ_left[attr] = leftData[key];
                    }   
                }
            }
            that.$nextTick(() => {
                that.Left_InitEcharts(this.BQ_left);
            });
        },
        //echart--init
        getRightEchartsData(rightData) {
            let that = this;
            this.BQ_right = {
                星期日: 0,
                星期一: 0,
                星期二: 0,
                星期三: 0,
                星期四: 0,
                星期五: 0,
                星期六: 0
            };
            if (rightData) {
                for (var key in rightData) {
                    that.BQ_right[this.mapConnectingTimeText(key)] =
                        rightData[key];
                }
            }
            that.$nextTick(() => {
                that.Right_InitEcharts(this.BQ_right);
            });
        },
        mapConnectingTimeText(key) {
            let Map = {
                0: "星期日",
                1: "星期一",
                2: "星期二",
                3: "星期三",
                4: "星期四",
                5: "星期五",
                6: "星期六"
            };
            return Map[key];
        },
        Left_InitEcharts(leftData) {
            let $dom = document.getElementById("LeftHoseEchart");
            $dom.style.width = this.domStyle.width;
            $dom.style.height = this.domStyle.height;
            let option = {
                tooltip: {
                    //提示框组件
                    showContent: true, //是否显示提示框浮层
                    alwaysShowContent: false, //是否永远显示提示框内容
                    showDelay: 0, //浮层显示的延迟，单位为 ms
                    hideDelay: 0, //浮层隐藏的延迟，单位为 ms
                    enterable: false,
                    formatter: function(params, ticket, callback) {
                        return `${params.name==='0'?'23':(params.name-1)}点到${params.name==='0'?'24':params.name}点之间：报警${params.data}次`
                    }
                },
                angleAxis: {
                    type: "category",
                    data: leftData.lenght == 0 ? [] : Object.keys(leftData),
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        interval: "0",
                        color: "#ffffff",
                        fontSize: 16,
                        padding: 0
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(255,255,255,.2)", //'#005B97',
                            width: 1
                        }
                    }
                },
                radiusAxis: {
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        color: "rgba(255,255,255,.5)",
                        padding: -10
                    },
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.2)",
                            width: 1
                        }
                    },
                    z: 120
                },
                polar: {
                    radius: 120,
                    center: ["50%", "40%"]
                },
                series: [
                    {
                        type: "bar",
                        color: "rgba(128,109,67,1)", // 扇形背景色
                        data:
                            leftData.lenght == 0 ? [] : Object.values(leftData),
                        coordinateSystem: "polar"
                    }
                ]
            };
            Echarts.init($dom).setOption(option);
        },
        Right_InitEcharts(RightData) {
            let $dom = document.getElementById("Rightweakechart");
            $dom.style.width = this.domStyle.width;
            $dom.style.height = this.domStyle.height;
            let option1 = {
                tooltip: {
                    //提示框组件
                    showContent: true, //是否显示提示框浮层
                    alwaysShowContent: false, //是否永远显示提示框内容
                    showDelay: 0, //浮层显示的延迟，单位为 ms
                    hideDelay: 0, //浮层隐藏的延迟，单位为 ms
                    enterable: false,
                    formatter: function(params, ticket, callback) {
                        return `${params.name}：报警 ${params.data}次`;
                    }
                },
                angleAxis: {
                    type: "category",
                    data: RightData.lenght == 0 ? [] : Object.keys(RightData),
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        interval: "0",
                        color: "#ffffff",
                        fontSize: 16,
                        padding: 0
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(255,255,255,.2)", //'#005B97',
                            width: 1
                        }
                    }
                },
                radiusAxis: {
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        color: "rgba(255,255,255,.5)",
                        padding: -10
                    },
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.2)",
                            width: 1
                        }
                    },
                    z: 120
                },
                polar: {
                    radius: 120,
                    center: ["45%", "40%"]
                },
                series: [
                    {
                        type: "bar",
                        color: "rgba(70, 134, 255,1)", // 扇形背景色
                        data:
                            RightData.lenght == 0
                                ? []
                                : Object.values(RightData),
                        coordinateSystem: "polar"
                    }
                ]
            };
            Echarts.init($dom).setOption(option1);
        }
    }
};
</script>

<style lang="scss" scoped>
.twocategory {
    width: 100%;
    height: calc(100% - 60px);
    > div {
        height: 100%;
    }
}
.botcontent {
    text-align: center;
    color: rgba(163, 190, 221, 1);
    font-size: 16px;
}
</style>
